<!DOCTYPE html>
<html>
<head>
<title>Connect4</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
	charset="UTF-8">
	
<script src="<?php echo base_url(); ?>assets/js/jquery-2.0.3.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script>
	function howTo() {
		alert("Join four circles of the same color in a row, column or diagonal.");
	}
	
	function about() {
		alert("Developed by Antonio and Catarina.");
	}
</script>
</head>
<body>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-inverse">
			<div class="navbar-inner">
				<a class="brand" href="">Connect4</a>
				<form class="navbar-form pull-right" action="../account/login" method="post">
					<input id="username" name="username" type="text" class="span2" placeholder="Username" required autofocus="autofocus">
					<input id="password" name="password" type="password" class="span2" placeholder="Password" required>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
	</nav>
	<?php 
		if (isset($errorMsg)) {
			echo "<p>" . $errorMsg . "</p>";
		}
	?>
	<div class="row">
		<div class="span8 offset1"> 
			<img src="<?php echo base_url(); ?>assets/images/connect4.jpg" 
				alt="Connect4" class="img-thumbnail">
		</div>
		
		<div class="span2 offset1">
			<div class="row">
				<a class="btn btn-inverse btn-large btn-block" href="../account/newForm">Sign in</a>
			</div>
			
			<div class="row">
				<a class="btn btn-inverse btn-large btn-block" href="../account/recoverPasswordForm">
					Forgot password
				</a>
			</div>
			
			<div class="row">
				<a class="btn btn-inverse btn-large btn-block" onClick="howTo()">How to play</a>
			</div>
			
			<div class="row">
				<button type="button" class="btn btn-inverse btn-large btn-block" onClick="about()">About</button>
			</div>
			
		</div>	
	</div>
	
</body>
</html>